<template>
    <div class="echart-chart">
        <div class="inside">
            <header><i class="el-icon-location-outline"></i> 通勤指数</header>
            <div class="chartBox clearfix">
                <article v-show="!chartNoDataShow">
                    <div class="chart-div" id="commuter-index-chart"></div>
                </article>
                <h4 ref="commuter_index_chart_NoData" v-show="chartNoDataShow"></h4>
            </div>
            <p v-show="false">{{getzipcode}}</p>

        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                myEcharts: '',
                chartNoDataShow: false, //判断是否有无数据
                bike: null,
                car: null,
                foot: null,
                transit: null,
                isidle: 0,//保证折叠面板在第一次展开后只请求一次接口，之后再展开的话就不需要重复请求

            }
        },
        computed: {
            //房源详情页图表使用——本房源所在邮zipcode
            getzipcode() {
                if(this.$store.getters.get_houseDetailsZipcode){
                    this.get_commuteIndex();
                }
                return this.$store.getters.get_houseDetailsZipcode
            }
        },
        created() {
        },
        mounted() {
            this.myEcharts = echarts.init(document.getElementById('commuter-index-chart'));
            this.myEcharts.showLoading();
            window.addEventListener('resize', () => {
                this.myEcharts.resize();
            });
        },
        beforeDestroy () {
            if(this.myEcharts){
                this.myEcharts.dispose();
            }
        },
        methods: {
            //获取通勤指数数据
            get_commuteIndex() {
                this.$get('/report/commuteindex/' + this.$store.getters.get_houseDetailsZipcode).then(res => {
                    if (res.status == 0) {
                        this.chartNoDataShow = false;
                        this.commuteIndex_charts(res.data.bike, res.data.car, res.data.foot, res.data.transit);
                    } else {
                        this.chartNoDataShow = true;
                        this.$refs.commuter_index_chart_NoData.innerText = res.msg;
                    }
                });
            },
            //通勤指数——饼图
            commuteIndex_charts(bike, car, foot, transit){
                this.myEcharts.hideLoading();
                this.myEcharts.setOption({
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/> <span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#ffe325'></span> {b}: {c}%"
                    },
                    legend: {
                        orient: 'vertical',
                        left: '20',
                        top: '20',
                        data: ['骑车', '驾车', '步行', '公交']
                    },
                    series: [{
                        name: '通勤指数',
                        type: 'pie',
                        radius: ['18%', '47%'],//圆的内外半径
                        center: ['49%', '60%'],//圆的X,Y轴平移
                        data: [
                            {
                                value: bike,
                                name: '骑车',
                            },
                            {
                                value: car,
                                name: '驾车',
                            },
                            {
                                value: foot,
                                name: '步行',
                            },
                            {
                                value: transit,
                                name: '公交',
                            }
                        ],
                        //高亮的扇区和标签样式
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        label: {
                            formatter: '{b}：{d}%'
                        }
                    }],
                    color: ['#40c3f9', '#ffbf53', '#fe5960', '#00bc7b'],
                });
            },
        },
        components: {
        }
    }
</script>

<style scoped lang="less" type="text/less">
</style>
